<template>
    <div>

      <div style="width: 83%;margin: auto;margin-top: 0.9rem">
        <p class="p1">找回密码</p>

        <div style="margin-top: 0.6rem;overflow: hidden">
          <div class="shouji" style="margin-top: 0.7rem">
            <img src="../../../src/assets/img/person/shouji.png" alt="">
            <input type="number" pattern="\d*" placeholder="请输入手机号" class="input1"  v-model="phone">
          </div>
			<div class="phonetis" v-if='phonewrong'>请输入正确手机号</div>
			<div class="phonetis" v-if='phonestatus'>请输入手机号</div>
          <div class="yanzheng">
            <img src="../../../src/assets/img/person/yanzheng.png" alt="">
            <input type="number" pattern="\d*" placeholder="请输入验证码" v-model="code">
            <mt-button type="primary" plain v-if='entercode' plain class="btnnn sendactive">重新发送<span>({{timecode}}s)</span></mt-button>
            <mt-button type="primary" plain v-else plain class="btnnn" @click='enterlogincode'>获取验证码</mt-button>
          </div>
					<div class="phonetis" v-if='codestatus'>请输入验证码</div>
          <div class="shouji" style="margin-top: 0.7rem">
            <img src="../../../src/assets/img/person/mima.png" alt="">
            <input  type="password" pattern="\d*" placeholder="请输入密码" class="input1"  v-model="newpassword">
          </div>
					<div class="phonetis" v-if='passwordstatus1'>密码过短</div>
					<div class="phonetis" v-if='passwordstatus2'>密码过长</div>
          <div class="shouji" style="margin-top: 0.7rem">
            <img src="../../../src/assets/img/person/mima.png" alt="">
            <input type="password" pattern="\d*" placeholder="请再次输入新密码" class="input1"  v-model="newpasswordagain" >
          </div>
			<div class="phonetis" v-if='passwordsagain'>两次密码不一致</div>
					
          <mt-button type="primary" v-if='code==""||phone==""||newpassword==""||newpasswordagain==""' class="btn111" @click="enter()">完成</mt-button>
          <mt-button type="primary" v-else class="btn111 butactive" @click="enter()">完成</mt-button>
        </div>
		
		<!-- 设置密码弹窗 -->
		<div class="shoewr-chenhoupass">
			<div class="chen-contener chenpass">
				<p class="chen-title">温馨提示</p>
				<p class="chen-text">您的账号({{tel}})还没有在平台注册，请前去注册</p>
				<div class="chen-but">
					<p class="chen-but-no" @click="repeatclose()">取消</p>
					<p class="chen-but-yes" @click="repeatclick()">去注册</p>
				</div>
			</div>
		</div>
		
      </div>
    </div>
</template>

<script>
    export default {
        name: "Wjmima",
      data(){
          return{
			entercode:false,
			timecode:60,
			phone:'',
			code:'',   //验证码
			newpassword:'',  //新密码
			newpasswordagain:'',  //第二次输入的新密码
			phonestatus:false,
			phonewrong:false,
			codestatus:false,
			passwordstatus1:false,   //密码过短
			passwordstatus2:false,//密码过长
			passwordsagain:false,
			isregister:'',
			tel:'',
          }
      },
			methods:{
				// 点击取消
				repeatclose(){
					$('.shoewr-chenhoupass').fadeOut();
				},
				// 点击去登录
				repeatclick(){
					$('.shoewr-chenhoupass').fadeOut();
					this.$router.push({
					  path:'/zhzc',
					})
				},
				// 点击获取验证码
				enterlogincode(){
					var that = this;
					if(that.phone==''){
						this.$toast({
						  message:'请输入手机号',
						  position:'center'
						});
					}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
						this.$toast({
						  message:'请输入正确的手机号',
						  position:'center'
						});
					}else{
						if(this.isregister==0||this.isregister=='0'){
							$('.shoewr-chenhoupass').fadeIn();
						}else{
							this.entercode = true;
							var times = 60;
							var that = this;
							var timer = setInterval(function () {
							  times--;
							  that.timecode = times
								// console.log(that.timecode)
							
							  if (times <= 0) {
								clearInterval(timer);
								that.entercode = false;
							  }
							}, 1000)
							that.axios.get(that.$store.state.url + "sms/getSmsCode",{
								params:{
									tel:that.phone,
								}
							}).then(res=>{
							  if (res.data.errcode == 0||res.data.errcode == '0'){
								// console.log(res.data)
								that.$toast({
								  message:res.data.msg,
								  position:'bottom'
								});
							  }else {
								that.$toast({
								  message:res.data.msg,
								  position:'bottom'
								});
							  }
							
							})
						}
					}
				},
				// 点击完成
				enter(){
					var that = this;
					if(this.phone==''){
						this.$toast({
						  message:'请输入手机号',
							position:'center'
						});
					}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))){
					that.$toast({
					  message:'请输入正确的手机号',
					  position:'center'
					});
				  }else if(that.code==''){
						that.$toast({
							message:'请输入验证码',
							position:'center'
						});
				  }else if(that.newpassword==''){
						that.$toast({
							message:'请输入密码',
							position:'center'
						});
					}else if(that.passwordstatus1){
						that.$toast({
							message:'密码过短',
							position:'center'
						});
					}else if(that.passwordstatus2){
						that.$toast({
							message:'密码过长',
							position:'center'
						});
					}else if(this.newpasswordagain!=this.newpassword){
						that.$toast({
							message:'俩次密码不一致',
							position:'center'
						});
					}else{
						var url = that.$store.state.url + "User/findPassword"
						var data ={
							tel:that.phone,
							password:that.newpassword,
							code:that.code,
						}
						that.axios({
							method:"POST",
							url:url,
							data:data,
						}).then(res=>{
							// console.log(res);
							var data = res.data;
							if(data.errcode==0||data.errcode=='0'){
								that.$toast({
								  message:'修改成功',
									position:'center'
								});
								setTimeout(function(){
									that.$router.push({
									  path:'/denglu'
									})
								},1500)
							}else{
								this.$toast({
							    message:res.data.msg,
									position:'center'
						    });
							}
						})
					}
				},
// 				checkAccount(){
// 					
// 				}
			},
			watch:{
				// 判断手机号
				phone(){
					// console.log(888);
					if(this.phone==''){
						this.phonestatus=true;
						this.phonewrong=false;
					}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
						this.phonestatus=false;
						this.phonewrong=true;
					}else{
						this.phonestatus=false;
						this.phonewrong=false;
						this.axios({
							method:"GET",
							url:this.$store.state.url + "User/checkAccount",
							params:{
								tel:this.phone,
								type:2
							}
						}).then(res=>{
							if(res.data.errcode==0||res.data.errcode=='0'){
								var data = res.data.data;
								// console.log(data);
									this.isregister = data.is_register;
								if(data.is_register==0||data.is_register=='0'){
									var tel1 = this.phone;
									this.tel = tel1.substr(0,3) + "****" + tel1.substr(7);
									$('.shoewr-chenhoupass').fadeIn();
								}
							}
						})
					}
				},
				// 验证码
				code(){
					if(this.code==''){
						this.codestatus=true
					}
				},
				newpassword(){
					if(this.code==''){
						this.codestatus=true
					}
					if(this.phone==''){
						this.phonestatus=true;
						this.phonewrong=false;
					}else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
						this.phonestatus=false;
						this.phonewrong=true;
					}else{
						this.phonestatus=false;
						this.phonewrong=false;
					}
					var newpassword=this.newpassword;
					var len = newpassword.length;
					// console.log(password.length);
					if(len<6||len<'6'){
						this.passwordstatus1=true;
						this.passwordstatus2=false;
					}else if(len>18||len>'18'){
						this.passwordstatus2=true;
						this.passwordstatus1=false;
					}else{
						this.passwordstatus2=false;
						this.passwordstatus1=false;
					}
				},
				newpasswordagain(){
					console.log(this.newpasswordagain==this.newpassword)
					if(this.newpasswordagain!=this.newpassword){
						this.passwordsagain=true
					}else{
						this.passwordsagain=false
					}
				},
			},
			mounted(){
				this.sdk.getJSSDK('','',this.$store.state.url);	
				
				if(window.sessionStorage.phonetok){
					var phonetok = window.sessionStorage.getItem('phonetok');
					this.phone = phonetok;
				}
			},
			destroyed() {
				window.sessionStorage.removeItem('phonetok')
			}
			
			
    }
</script>

<style scoped>
	.phonetis{
		color: #FE3434;
		font-size: .26rem;
		text-align: right;
		margin-top: .13rem;
	}
  .p1{
    font-size:0.5rem;
    font-weight:800;
    color:rgba(51,51,51,1);
  }
  .shouji{
    position: relative;
    height: 0.7rem;
  }
  .shouji img{
    width: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0.18rem;
  }
  .input1{
    width: 100%;
    height: 0.7rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    text-indent: 0.6rem;
  }
  input{
    border: none;
    outline: none;
    font-size: 0.3rem;
  }
  input::placeholder{
    font-size:0.3rem;
    color:rgba(153,153,153,1);
  }
  input:focus::placeholder{
    color: transparent;
  }
  .yanzheng{
    width: 100%;
    height: 0.9rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
    margin-top: 0.4rem;
    position: relative;
  }
  .yanzheng img{
    width: 0.4rem;
    position: absolute;
    left: 0;
    bottom: 0.1rem;
  }
  .yanzheng input{
    width: 50%;
    float: left;
    margin-top: 0.4rem;
    text-indent: 0.6rem;
  }
  .btnnn {
    /* width:2.4rem; */
	padding: 0 .2rem;
    height:0.76rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.38rem;
    font-size:0.3rem;
    font-weight:500;
    color:rgba(2,135,255,1);
    float: right;
    margin-bottom: 0.2rem;
  }
	.btnnn.sendactive{
		border: 1px solid #EDEDED;
		background: #EDEDED;
		color: #999999;
	}
  .btn111{
    width: 100%;
    height: 0.88rem;
    font-size: 0.3rem;
    border-radius:0.44rem;
    background:#EDEDED;
    color: #999999;
    margin-top: 0.8rem;
		border: 1px solid #EDEDED;
  }
	.butactive{
		background:rgba(2,135,255,1) !important;
		color: #fff !important;
		border: 1px solid ##0287FF;
	}
</style>
